<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <title>找房无忧-登录</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/login.css"/>
</head>
<body>
<!--头部-->
<header>
    <h1><a href="#"><img src="image/index/logo.jpg" alt=""/></a></h1>

    <div class="icon">
        <a href="#"><img src="image/index/my.jpg" alt=""/></a>
        <a href="#"><img src="image/index/xiazai.jpg" alt=""/></a>
    </div>
</header>

<section class="rentalAddr">
    <p><strong>首页</strong> > <span>我的</span> > <span>登录</span></p>
</section>

<section class="registerForm login">
    <form action="#">
        <ul class="title">
            <li class="active">普通登录</li>
            <li>验证码快捷登录</li>
        </ul>
        <div class="customLogin active">
            <ul>
                <li>
                    <input type="text" placeholder="请输入手机号码"/>
                </li>
                <li><input type="text" placeholder="请输入密码"/></li>
            </ul>
            <input class="registerBtn" type="submit" value="立即登录"/>
            <div class="tiShi">
                <a href="#">立即注册</a>
                <a href="#">忘记密码</a>
            </div>
        </div>
        <div class="fastLogin ">
            <ul>
                <li class="mima">
                    <input type="text" placeholder="请输入手机号码"/>
                    <a id="code"  href="#">发送验证码</a>
                </li>
                <li><input type="text" placeholder="请输入短信中的验证码"/></li>
            </ul>
            <input class="registerBtn" type="submit" value="验证并登录"/>
            <div class="tiShi">
                <a href="#">立即注册</a>
                <a href="#">忘记密码</a>
            </div>
        </div>
    </form>
</section>

<script src="js/rem.js"></script>
<script src="js/zepto.js"></script>
<script>
//    切换普通登录和快速登录
    var $titleLi = $('.title li');
    var $div = $('form > div');
    $titleLi.tap(function () {

        var index = $(this).index();

        $titleLi.removeClass('active');
        $(this).addClass('active');

        $div.hide();
        $div.eq(index).show();

    });

//验证码60秒重新发送
//var min = 0;
//var time = null;
//$('#code').tap(function(){
//    min = 60;
//    clearInterval(time);
//   setInterval(fn,1000);
//});
//function fn (){
//    min = --min ;
//    if(min>0){
//        $('#code').html('（' + min + '秒）重发');
//    }else{
//        $('#code').html('发送验证码');
//    }
//}
//验证码60秒重新发送
var min  = 60;
var time;
$('#code').tap(function(){
    clearInterval(time);
    time = setInterval(fn,1000);
});
function fn (){
    min = --min ;
    if(min>0){
        $('#code').html('（' + min + '秒）重发');
    }else{
        min = 60;
        $('#code').html('发送验证码');
    }
}
</script>
</body>
</html>